<template>
  <a-modal
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="类型名称">
          <a-input placeholder="请输入类型名称" v-decorator="[ 'typeName',validatorRules.typeName]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="滤芯规格">
          <a-input-number :min="1" placeholder="请输入滤芯规格" v-decorator="[ 'specification',validatorRules.specification]"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  //导包
  import pick from 'lodash.pick'
  import {commodityTypeadd,commodityTypeupd} from  '@/api/api'
    //对象内容
  export default {
    //对象名称
    name: "CommodityTypeModel",
    //申明导入的对象
    // components: {DictModal, DictItemList},
    //对象中的变量
    data() {
      return {
        description: '这是商品类型新增、修改页面',
        visible: false,
        uploadLoading:false,
        picUrl:"",
        model: {},
        headers:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
            typeName:{ rules: [{ required: true, message: '请输入商品类型名称!' }]},
            specification:{ rules: [{ required: true, message: '请输入滤芯规格!' }]},
        }
      }
    },
    methods: {
      //对象中的方法
      add() {
        this.edit({})
      },
      edit(record) {
        if (record.id) {
          this.visiblekey = true
        } else {
          this.visiblekey = false
        }
        //重置表单
        this.form.resetFields()
        //当前选中行的内容存到model变量中
        this.model = Object.assign({}, record)
        this.visible = true
        this.$nextTick(() => {
            //为表单赋值
          this.form.setFieldsValue(pick(this.model, 'typeName', 'specification'))
        })
      },  
        // 确定
        handleOk() {
            //this的作用域不能到表单的验证函数中
          const that = this;
          //提交表单前验证函数err：报错  values：表单中填写的所有的值
          this.form.validateFields((err, values) => {
              if(!err){
                  //打开提交动画
                   that.confirmLoading = true;
                   //把values中的值和this.model中的值进行拼接，成一个新的值叫formData
                   let formData = Object.assign(this.model, values)
                   let obj;
                   //判断提交的数据中是否存在Id，如果存在Id是修改，不存在id是新增
                   if(!this.model.typeId){
                       //如果不存在则是新增
                        obj=commodityTypeadd(formData);
                   }else{
                       //如果存在则是修改
                        obj=commodityTypeupd(formData);
                   }
                   //res提交成功之后的返回结果
                   obj.then((res) => {
                       //判断是否请求成功,成功返回true，失败返回falses
                       if(res.success){
                            that.$message.success(res.message)
                            //子页面返回ok
                            that.$emit('ok')
                       }else{
                            that.$message.success(res.message);
                       }
                   }).finally(() => {
                       //关闭提交动画
                        that.confirmLoading = false;
                        //关闭新增修改页面
                        that.close();
                    })
              }
          })
        },
            // 关闭
        handleCancel() {
            this.close();
        },
        close() {
            this.$emit('close');
            this.visible = false;
        }
    },
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>